<template>
  <el-table
    @row-contextmenu="rightClick"
    :header-cell-style="{ 'text-align': 'center' }"
    :data="fileList"
    style="width: 100%"
    height="100%"
  >
    <el-table-column width="38">
      <template slot-scope="scope">
        <i class="icon" :class="getSuffix(scope.row.userFile.name)"></i>
      </template>
    </el-table-column>
    <el-table-column label="文件名" show-overflow-tooltip align="left">
      <template slot-scope="scope">
        <span>{{ scope.row.userFile.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="分享链接" show-overflow-tooltip align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.shareURL.url }}</span>
      </template>
    </el-table-column>
    <el-table-column label="提取码" align="center">
      <template slot-scope="scope">
        {{ scope.row.checkNum }}
      </template>
    </el-table-column>
    <el-table-column label="分享时间" align="center">
      <template slot-scope="scope">
        {{ scope.row.shareStartTime }}
      </template>
    </el-table-column>
    <el-table-column label="分享天数" align="center">
      <template slot-scope="scope">
        {{ scope.row.shareDays === -1 ? "永久" : scope.row.shareDays }}
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { mapActions } from "vuex";
import { getShareFileList, cancelShare } from "@/api/shareFile";
import { clipboard } from "@/global";

export default {
  name: "Share",
  data() {
    return {
      types: ["zip", "mp3", "mp4"],
      fileList: null
    };
  },
  mounted() {
    this.request();
    this.$bus.$on("clearHistory", () => this.clearHistory());
  },
  destroyed() {
    this.$bus.$off(["clearHistory"]);
  },
  methods: {
    ...mapActions(["clearHistory"]),
    rightClick(row, column, event) {
      let items = [
        {
          label: "复制链接和提取码",
          onClick: () => {
            clipboard.writeText(
              "链接：" + row.shareURL.url + " 提取码：" + row.checkNum
            );
            this.$message.success("复制成功，快和小伙伴分享吧");
          }
        },
        {
          label: "取消分享",
          onClick: () =>
            cancelShare(row.id).then(
              () => this.$message.success("取消分享成功") && this.request()
            )
        }
      ];
      this.$contextmenu({
        items: items,
        event,
        zIndex: 3,
        minWidth: 140
      });
    },
    request() {
      this.$loading({
        lock: true,
        text: "正在拼命加载中..."
      });
      getShareFileList().then(res => {
        this.fileList = res.data;
        this.$loading().close();
      });
    },
    getSuffix(filename) {
      const suffix = filename
        .split(".")
        .slice(-1)
        .pop();
      return this.types.indexOf(suffix) > 0 ? suffix : "misc";
    }
  }
};
</script>

<style lang="less" scoped>
.icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: no-repeat 100% 100%;
  background-size: cover;
  flex-shrink: 0;
}
.dir {
  background-image: url("../../static/icons/folder.png");
}
.zip {
  background-image: url("../../static/icons/zip.png");
}
.misc {
  background-image: url("../../static/icons/misc.png");
}
.mp3 {
  background-image: url("../../static/icons/music.png");
}
.jpg {
  background-image: url("../../static/icons/jpg.png");
}
.mp4 {
  background-image: url("../../static/icons/video.png");
}
.txt {
  background-image: url("../../static/icons/txt.svg");
}
.line {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
